import React, { Component } from 'react'
import { View, Image, Text, Navigator } from '@tarojs/components'
import { SpNavBar, SpPage, Loading } from '@/components'
import Taro from '@tarojs/taro'
import api from '@/api'

import './agent.scss'

export default class agent extends Component {
  constructor(props) {
    super(props)

    this.state = {
      info: null,
      cell: [
        {
          icon: 'agent-qy.png',
          text: '区域',
          url: '/marketing/pages/distribution/agent-area'
        },
        {
          icon: 'agent-sj.png',
          text: '商家',
          url: '/marketing/pages/distribution/agent-shopList'
        },
        {
          icon: 'agent-tz.png',
          text: '团长',
          url: '/marketing/pages/distribution/agent-teamLeaderList'
        },
        {
          icon: 'agent-yjjl.png',
          text: '佣金记录',
          url: '/marketing/pages/distribution/agent-rebateList'
        },
        {
          icon: 'agent-txjl.png',
          text: '提现记录',
          url: '/marketing/pages/distribution/agent-cashWithdrawalList'
        }
      ],
      cell2: [
        {
          icon: 'agent-rz.png',
          text: '认证信息',
          url: '/marketing/pages/distribution/agent-info'
        }
      ]
    }
  }
  // 可以使用所有的 React 生命周期方法
  componentDidMount() {}
  // onLoad
  onLoad() {}

  // onReady
  onReady() {}

  // 对应 onShow
  componentDidShow() {
    this.fetch()
  }

  // 对应 onHide
  componentDidHide() {}

  // 对应 onPullDownRefresh，除了 componentDidShow/componentDidHide 之外，
  // 所有页面生命周期函数名都与小程序相对应
  onPullDownRefresh() {}

  async fetch() {
    const resUser = Taro.getStorageSync('userinfo')
    const { username, avatar, agentId } = resUser

    const { brokerage_total, withdrawal_brokerage, tobesettled_brokerage } =
      await api.agent.statistics({
        agent_id: agentId
      })

    const info = { username, avatar, withdrawal_brokerage, brokerage_total, tobesettled_brokerage }
    this.setState({ info })
  }
  render() {
    const { info, cell, cell2 } = this.state
    if (!info) {
      return <Loading />
    }
    return (
      <SpPage className='page-distribution-index'>
        <SpNavBar title='招商代理' leftIconType='chevron-left' />
        <View className='header'>
          <View className='view-flex view-flex-middle'>
            <Image
              className='header-avatar'
              src={info.avatar || `${process.env.APP_IMAGE_CDN}/user_icon.png`}
              mode='aspectFill'
            />
            <View className='header-info view-flex-item'>{info.username}</View>
          </View>
        </View>
        <View className='section achievement'>
          <View className='section-body view-flex'>
            <View className='view-flex-item content-center'>
              <View className='amount'>
                <Text className='count'>{info.brokerage_total / 100}</Text>元
              </View>
              <View>总佣金</View>
            </View>
            <View className='view-flex-item content-center'>
              <View className='amount'>
                <Text className='count'>{info.tobesettled_brokerage / 100}</Text>元
              </View>
              <View>待结算</View>
            </View>
            <View className='view-flex-item content-center'>
              <View className='amount'>
                <Text className='count'>{info.withdrawal_brokerage / 100}</Text>元
              </View>
              <View>可提现</View>
            </View>
          </View>
        </View>
        <View className='section list share'>
          {cell.map((item) => (
            <Navigator className='list-item' open-type='navigate' url={item.url} key={item.text}>
              <Image
                className='list-item-img'
                src={`${process.env.APP_IMAGE_CDN}/${item.icon}`}
                mode='aspectFill'
              />
              <View className='list-item-txt'>{item.text}</View>
              <View className='iconfont icon-arrowRight icon-right' />
            </Navigator>
          ))}
        </View>
        {/* cell2 */}
        <View className='section list share'>
          {cell2.map((item) => (
            <Navigator className='list-item' open-type='navigate' url={item.url} key={item.text}>
              <Image
                className='list-item-img'
                src={`${process.env.APP_IMAGE_CDN}/${item.icon}`}
                mode='aspectFill'
              />
              <View className='list-item-txt'>{item.text}</View>
              <View className='iconfont icon-arrowRight icon-right' />
            </Navigator>
          ))}
        </View>
      </SpPage>
    )
  }
}
